<template>
  <!-- el-form   model 存放着数据， rules 校验规则 -->
  <!-- el-form-item 生成label属性的， 当前校验label对应的内容是否合法-->
  <!-- el-input v-model实现双向绑定， :value  @input事件 -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <button @click="submitForm">提交表单</button>
    </el-form-item>
  </el-form>
</template>

<script>
import elForm from "./el-form.vue";
import elFormItem from "./el-form-item.vue";
import elInput from "./el-input.vue";
export default {
  components: {
    "el-form-item": elFormItem,
    "el-form": elForm,
    "el-input": elInput,
  },
  data() {
    return {
      ruleForm: {
        username: "11",
        password: "222",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名" },
          { min: 3, max: 5, message: "长度在3 到 5 个字符串" },
        ],
        password: [{ required: true, message: "请输入密码" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((flag) => {
        if (flag) {
          alert("submit");
        } else {
          console.log("验证不通过");
        }
      });
    },
  },
  mounted() {
    window.aa = this.$data;
  },
};
</script>

<style></style>
